<template>
	<view class="container">
		<view class="topList">
			<image src="../../static/left.png" @click="back" class="backImg" mode="widthFix"></image>
			<image src="../../static/add.png" @tap="add" class="addImg"></image>
		</view>
		<view class="main">
			<view v-if="nullInfo" class="no-address-tips">
				<image src="../../static/null/address.png" mode="widthFix"></image>
				<view class="mb-30">暂无地址信息</view>
			</view>
			<template v-else>
				<uni-swipe-action>
					<uni-swipe-action-item class="address-wrapper" :options="swipeOption" @click="handleSwipeClick(address.addrId)" v-for="(address, index) in address" :key="index">
						<view class="address" @tap="chooseAddress(address)">
							<view class="left flex-fill overflow-hidden mr-20">
								<view class="font-size-lg font-weight-bold text-truncate addressTit" >
									<text v-if="address.defaultAddr == 1">默认</text> {{ address.addr }}  {{address.houseNumber}}
								</view>
								<view class="font-size-sm text-color-assist">
									{{ address.receiver }} {{ address.gender=='1' ? '女士' : '先生' }} {{ address.mobile }}
								</view>
							</view>
							<image src="../../static/edit.png" class="edit-icon" @tap.stop="edit(address.addrId)"></image>
						</view>
					</uni-swipe-action-item>
				</uni-swipe-action>
			</template>
		</view>
		<!-- <view class="btn-box">
			<button type="primary" size="default" >新增地址</button>
		</view> -->
	</view>
</template>

<script>
	import uniSwipeAction from '../../components/uni-swipe-action/uni-swipe-action'
	import uniSwipeActionItem from '../../components/uni-swipe-action-item/uni-swipe-action-item'
	export default {
		data() {
			return {
				
				is_choose: false, //是否选择地址
				swipeOption: [
					{
						text: '删除',
						style: {
							backgroundColor: '#D12E32'
						}
					}
				],
				address:[],
				nullInfo:false,
				addFlag:''
			}
		},
		onLoad(e) {
			this.is_choose = e.is_choose || false
			if(e.flag){
				this.addFlag = e.flag;
				uni.setStorageSync('firstAdd','first')
			}
			this.$wxHide()
		},
		onShow() {
			this.getData()
		},
		methods: {
			back(){
				uni.navigateBack()
			},
			//加载个人地址列表
			getData(){
				var that = this;
				uni.showLoading({
					title:'加载中',
					mask:true
				})
				that.uni_request({
					url: '/api/address/companyUserAddressList',
					method: 'POST',
					success: (res) => {
						uni.hideLoading()
						if (res.data.code == 0 || res.data.code == 200) {
							that.address = res.data.data
							if(that.address.length == 0){
								that.nullInfo = true
							}else{
								that.nullInfo = false
							}
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							})
							setTimeout(function() {
								uni.navigateBack()
							}, 1000);
						}
					},
					fail(e){
						uni.hideLoading()
					},
				})
			},
			add() {
				uni.navigateTo({
					url: '/pages/address/add'
				})
			},
			edit(id) {
				uni.navigateTo({
					url: '/pages/address/add?id=' + id
				})
			},
			handleSwipeClick(addrId) {
				var that = this;
				uni.showModal({
					content: '确定要删除该地址？',
					confirmColor:'#8d4a32',
					success: res => {
						if(res.confirm) {
							that.uni_request({
								url: '/api/address/' + addrId,
								method: 'DELETE',
								success: (res) => {
									uni.hideLoading()
									if (res.data.code == 0 || res.data.code == 200) {
										uni.showToast({
											title: '删除成功',
											icon: 'none'
										})
										that.getData()
									} else {
										uni.showToast({
											title: res.data.msg,
											icon: 'none'
										})
									}
								},
								fail(e){
									uni.hideLoading()
								},
							})
						}
					}
				})
			},
			//下单页切换地址
			chooseAddress(address) {
				if(!this.is_choose) return
				uni.setStorageSync('changeAddress',address)
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.topList{
		width: 100vw;justify-content: space-between;
		height: 55px;
		@extend %flex-align-center;padding: 0 15px;
		.backImg{
			width: 28px;
		}
		.addImg{
			width: 25px;height: 25px;
		}
	}
	.container {
		width: 100%;
		height: 100%;
	}
	.no-address-tips{
		display: flex;align-items: center;justify-content: center;flex-direction: column;
		color: #888;
		image{width: 70vw;}
	}
	.main {
		width: 100%;
		padding: 0 30rpx 30rpx;
		display: flex;
		flex-direction: column;
		padding-bottom: 100rpx;
		
		.address-wrapper {
			margin-bottom: 30rpx;
		}
		
		.address {
			width: 100%;
			padding: 40rpx 30rpx;
			background-color: #FFFFFF;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.addressTit{
				
				margin-bottom: 10px;
				text{
					margin-right: 8px;font-size: 12px;padding: 1px 5px;
					color: #8bda41;border: 1px solid #8bda41;border-radius: 5px;
				}
			}
			.right {
				flex: 1;
				overflow: hidden;
				display: flex;
				flex-direction: column;
			}
			
			.edit-icon {
				width: 50rpx;
				height: 50rpx;
				flex-shrink: 0;
			}
		}
	}
	
	.btn-box {
		height: 90rpx;
		box-shadow: 0 0 20rpx rgba($color: $text-color-assist, $alpha: 0.1);
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		button {
			font-size: 16px;letter-spacing: 1px;
			height: 100%;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
</style>
